<template>
  <div class="workbar-container">
    <div class="workbar-header">
      <h1>南航碧桂园小区</h1>
      <div class="area-message">
        <div class="message">
          <img src="../asset/people.png" alt="" />
          <div class="nums">
            <div>住户总数量</div>
            <div class="nums-setting">{{ peopleNums }}</div>
          </div>
        </div>
        <div class="message">
          <img src="../asset/house.png" alt="" />
          <div class="nums">
            <div>房屋总数量</div>
            <div class="nums-setting">{{ houseNums }}</div>
          </div>
        </div>
        <div class="message">
          <img src="../asset/car.png" alt="" />
          <div class="nums">
            <div>车位总数量</div>
            <div class="nums-setting">{{ carNums }}</div>
          </div>
        </div>
        <div class="message no-margin">
          <img src="../asset/device.png" alt="" />
          <div class="nums">
            <div>设备总数量</div>
            <div class="nums-setting">{{ deviceNums }}</div>
          </div>
        </div>
      </div>
    </div>
    <div class="workbar-body">
      <div class="workbar-echarts">
        <span class="title">近一周报修量趋势</span>
        <Echarts></Echarts>
      </div>
      <div class="workbar-nav">
        <div class="nav-head">
          <div class="nav-head-title">便捷导航</div>
          <div class="nav-head-menu">
            <router-link to="/backend/file/household" class="nav-head-item"
              >新建住户</router-link
            >
            <router-link to="/backend/car/position" class="nav-head-item"
              >车位管理</router-link
            >
            <router-link to="/backend/tenement/repair" class="nav-head-item"
              >新建报修</router-link
            >
            <router-link to="/backend/payment/bill" class="nav-head-item"
              >账单管理</router-link
            >
            <!-- <div class="nav-head-item">
              <el-button class="el-button"> +&nbsp;添加 </el-button>
            </div> -->
          </div>
        </div>
        <div class="nav-body">
          <div class="memo-title">备忘录</div>
          <div class="memo">
            <el-input
              v-model="remark"
              type="textarea"
              :rows="3"
              placeholder="本网页由大厂收割机独家制造"
            >
            </el-input>
          </div>
        </div>
      </div>
    </div>
    <!-- 住户查询 -->
    <div class="page">
      <div class="page-header">
        <div class="page-header-left">
          <h1>住户列表</h1>
        </div>
      </div>
      <div class="search-container">
        <span>住户查询</span>
        <el-input
          v-model="region_name"
          style="width: 200px; margin-right: 10%"
          placeholder="请输入住户姓名"
        />
        <el-button @click="searchPerson" type="primary">查询</el-button>
        <el-button @click="resetSearch" type="default">重置</el-button>
      </div>
      <el-table :data="tableData" style="width: 100%">
        <el-table-column label="序号" prop="id" />
        <el-table-column label="姓名" prop="name" />
        <el-table-column label="类型" prop="relManager" />
        <el-table-column label="证件账号" prop="cardNum" />
        <el-table-column label="手机号码" prop="phone" />
        <el-table-column label="房间" prop="houseDetail" />
      </el-table>

      <!-- 分页 -->
      <div class="pagination">
        <el-pagination
          v-model:current-page="pageNum"
          v-model:page-size="pageSize"
          :page-sizes="[5, 10, 20]"
          style="margin-bottom: 2rem"
          background
          layout="total, sizes, prev, pager, next, jumper"
          :total="totalCount"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>
  </div>
</template>

<script setup>
import { animateNumericCount } from "pixiu-number-toolkit";
import { ref, onMounted, reactive } from "vue";
import Echarts from "./Echarts1.vue";
import axios from "axios";

const peopleNums = ref(0);
const houseNums = ref(0);
const carNums = ref(0);
const deviceNums = ref(0);

const pageSizeOptions = [5, 10, 20];

function animateNumber(from, to, duration, callback) {
  animateNumericCount(from, to, duration, function (value) {
    callback(Math.floor(value));
  });
}

const tableData = ref([]);
const totalCount = ref(0);
const pageNum = ref(1);
const pageSize = ref(pageSizeOptions[0]);
const region_name = ref("");
const remark = ref("");

const form = reactive({
  id: "",
  name: "",
  relManager: "",
  cardNum: "",
  phone: "",
  houseDetail: "",
});

const searchPersons = async () => {
  try {
    const config = {
      url: "http://localhost:8080/person/list",
      method: "POST",
      headers: {
        Authorization: localStorage.getItem("token"),
      },
      data: {
        cardNum: form.cardNum, // 证件号
        name: region_name.value, // 姓名 (作为条件传给后端)
        relManager: form.relManager, // 关联经理
        phone: form.phone, // 手机号码
        houseDetail: form.houseDetail, // 房屋详情
        page: pageNum.value, // 当前页码
        pageSize: pageSize.value, // 每页条数
      },
    };
    const response = await axios(config);

    if (response.data.code === 1) {
      // 更新数据
      tableData.value = response.data.data.data; // 实际的住户数据
      totalCount.value = response.data.data.total; // 总记录数
      pageNum.value = response.data.data.pageNumber; // 当前页码
      pageSize.value = response.data.data.pageSize; // 每页条数
    } else {
      console.error("查询失败:", response.data.msg);
    }
  } catch (error) {
    console.error("查询住户列表失败:", error);
  }
};

const searchPerson = async () => {
  console.log("查询条件 region_name:", region_name.value); // 调试输出
  try {
    // 调用 searchPersons 来进行分页查询，传递名字查询参数
    pageNum.value = 1; // 按名字查询时默认从第一页开始
    await searchPersons();
  } catch (error) {
    console.error("按名字查询失败:", error);
  }
};

const resetSearch = () => {
  region_name.value = ""; // 清空查询条件
  pageNum.value = 1; // 重置为第一页
  pageSize.value = pageSizeOptions[0]; // 重置每页条数为默认值
  searchPerson(); // 重新查询所有住户数据
};

//初始化加载值
onMounted(() => {
  console.log("页面加载，准备发送请求");
  //加载住户总数量
  axios
    .get("http://localhost:8080/api/trigger/total/3", {
      headers: {
        Authorization: localStorage.getItem("token"),
      },
    })
    .then((response3) => {
      // 获取车位数量
      const totalperson = response3.data;

      // 使用 animateNumber 函数进行动画效果
      animateNumber(0, totalperson, 2000, function (value) {
        peopleNums.value = value; // 更新 carNums 的值
      });
    })
    .catch((error) => {
      console.error("获取房屋数量失败", error);
    });
  //加载房屋总数量
  axios
    .get("http://localhost:8080/api/trigger/total/2", {
      headers: {
        Authorization: localStorage.getItem("token"),
      },
    })
    .then((response2) => {
      // 获取车位数量
      const totalHouse = response2.data;

      // 使用 animateNumber 函数进行动画效果
      animateNumber(0, totalHouse, 2000, function (value) {
        houseNums.value = value; // 更新 carNums 的值
      });
    })
    .catch((error) => {
      console.error("获取房屋数量失败", error);
    });
  //加载车位总数数量
  axios
    .get("http://localhost:8080/api/trigger/total/1", {
      headers: {
        Authorization: localStorage.getItem("token"),
      },
    })
    .then((response1) => {
      // 获取车位数量
      const totalCars = response1.data;

      // 使用 animateNumber 函数进行动画效果
      animateNumber(0, totalCars, 2000, function (value) {
        carNums.value = value; // 更新 carNums 的值
      });
    })
    .catch((error) => {
      console.error("获取车位数量失败", error);
    });

  //加载设备总数量
  axios
    .get("http://localhost:8080/api/trigger/total/4", {
      headers: {
        Authorization: localStorage.getItem("token"),
      },
    })
    .then((response4) => {
      // 获取车位数量
      const totalDevices = response4.data;

      // 使用 animateNumber 函数进行动画效果
      animateNumber(0, totalDevices, 2000, function (value) {
        deviceNums.value = value; // 更新 carNums 的值
      });
    })
    .catch((error) => {
      console.error("获取设备数量失败", error);
    });
});

const handleSizeChange = (newSize) => {
  pageSize.value = newSize;
  searchPersons();
};

const handleCurrentChange = (newPage) => {
  pageNum.value = newPage;
  searchPersons();
};

// 初始化加载
searchPersons();
</script>

<style lang="less" scoped>
.workbar-container {
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;

  .workbar-header {
    flex-basis: 15rem;
    width: 100%;
    margin-top: 4rem;
    margin-bottom: 2rem;

    h1 {
      font-size: 2rem;
      font-weight: 600;
      margin-bottom: 2rem;
    }

    .area-message {
      display: flex;
      flex-direction: row;
      height: 11rem;

      .message {
        flex: 1;
        margin-right: 2.5rem;
        display: flex;
        font-size: 1.5rem;
        color: #423838;
        background-color: #fbfbfb;

        img {
          margin-left: 1rem;
          width: 5rem;
          height: 5rem;
          position: relative;
          transform: translateY(-50%);
          top: 50%;
        }

        .nums {
          position: relative;
          top: 30%;
          left: 5%;
          margin-bottom: 1rem;

          .nums-setting {
            font-size: 2.5rem;
            font-weight: 600;
            color: #333;
            margin-top: 1rem;
            margin-left: 1rem;
          }
        }
      }

      .no-margin {
        margin-right: 0;
      }
    }
  }

  .workbar-body {
    flex-basis: 40rem;
    width: 100%;
    display: flex;
    flex-direction: row;

    .workbar-echarts {
      flex: 2;
      height: 100%;
      background-color: #ffffff;

      .title {
        font-size: 1.5rem;
        font-weight: 400;
        margin-bottom: 2rem;
        top: 2rem;
        left: 3rem;
        position: relative;
      }
    }

    .workbar-nav {
      flex: 1;
      height: 100%;
      display: flex;
      flex-direction: column;
      padding-left: 2rem;

      .nav-head {
        width: 100%;
        flex-basis: 18rem;
        background-color: white;

        .nav-head-title {
          font-size: 1.5rem;
          position: relative;
          left: 3.5rem;
          top: 2.5rem;
          color: #454444;
        }

        .nav-head-menu {
          display: flex;
          flex-wrap: wrap;
          position: relative;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          margin-left: 2rem;
          margin-right: 2rem;
          color: #706e6e;

          .nav-head-item {
            flex: 0 0 25%;
            font-size: 1.4rem;
            margin-bottom: 2rem;
            cursor: pointer; /* 鼠标悬停时变成手型 */
            color: rgb(0, 0, 0); /* 文字颜色 */

            .el-button {
              color: rgb(67, 185, 239);
              position: relative;
              height: 2rem;
              border: 1px solid rgb(67, 185, 239);
              border-radius: 0;
            }
          }
        }
      }

      .nav-body {
        flex: 1;
        width: 100%;
        background-color: white;
        margin-top: 2rem;

        .memo-title {
          font-size: 1.5rem;
          font-weight: 400;
          margin-top: 2rem;
          margin-left: 2rem;
        }

        .memo {
          position: relative;
          top: 2rem;
          margin-left: 2rem;
          margin-right: 2rem;
        }
      }
    }
  }
}

span {
  display: inline-block;
  font-size: 15px;
  margin-top: 1rem;
  margin-left: 1rem;
  margin-right: 1rem;
  height: 24px;
}

.search-container {
  display: flex; /* 设置为 flex 布局 */
  align-items: center; /* 垂直居中对齐 */
  margin-bottom: 20px; /* 输入框和按钮之间的垂直间距 */
  padding-left: 1.5rem;
}

.search-container .el-input {
  margin-right: 10px; /* 输入框和按钮之间的水平间距 */
}

.search-container .el-button {
  margin-left: 10px; /* 重置按钮与查询按钮之间的水平间距 */
}

a {
  text-decoration: none;
  color: black;
  transition: color 0.3s ease;
}

a:hover {
  color: #4299e1;
}

.page {
  background-color: white;
  height: auto;
  margin-top: 2rem;
  margin-bottom: 2rem;
  padding-left: 2rem; /* 给页面添加左侧间距 */
  padding-top: 2rem; /* 给页面添加顶部间距 */
  h1 {
    font-size: 2rem;
    font-weight: 600;
    margin-bottom: 2rem;
  }
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  h1 {
    font-size: 2rem;
    font-weight: 600;
    margin-bottom: 1rem;
    padding-left: 20px;
  }
}

.pagination {
  display: flex;
  margin-top: 2rem;
  justify-content: center;
}
</style>
